import { StrictMode, useCallback } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { HashRouter, Route, Routes, useNavigate } from 'react-router'
import WelcomePage from './pages/WelcomePage'
import ChatPage from './pages/ChatPage'
import HistoryPage from './pages/HistoryPage'
import SettingsPage from './pages/SettingsPage'

import "@vscode-elements/elements/dist/vscode-split-layout";
import "@vscode-elements/elements/dist/vscode-button";
import "@vscode-elements/elements/dist/vscode-checkbox";
import "@vscode-elements/elements/dist/vscode-form-group";
import "@vscode-elements/elements/dist/vscode-label";
import "@vscode-elements/elements/dist/vscode-icon";
import "@vscode-elements/elements/dist/vscode-single-select";
import "@vscode-elements/elements/dist/vscode-multi-select";
import "@vscode-elements/elements/dist/vscode-option";
import "@vscode-elements/elements/dist/vscode-radio";
import "@vscode-elements/elements/dist/vscode-radio-group";
import "@vscode-elements/elements/dist/vscode-textfield";
import "@vscode-elements/elements/dist/vscode-textarea";
import "@vscode-elements/elements/dist/vscode-tree";
import "@vscode-elements/elements/dist/vscode-collapsible";
import "@vscode-elements/elements/dist/vscode-form-container";
import { useEvent } from 'react-use'
import { MessageType } from '../../src/utils/MessageHandler'

if (import.meta.env.DEV) {
  await import("@vscode-elements/webview-playground");
}

export default function App() {
    const navigate = useNavigate()
    const handleMessage = useCallback((e: MessageEvent) => {
      const message = e.data 
      console.log('App收到消息', message)
      if(message.type === MessageType.navigate) {
        navigate(message.data.path, {state: message.data.state})
      }
    }, [navigate])
    useEvent('message', handleMessage)
    return (
      <Routes>
        <Route index path="/" element={<WelcomePage />} />
        <Route path="/chat/:taskId" element={<ChatPage />} />
        <Route path="/history" element={<HistoryPage />} />
        <Route path="/settings" element={<SettingsPage />} />
      </Routes>
  )
}

createRoot(document.getElementById('root')!).render(
    <StrictMode>
      {import.meta.env.DEV ? <vscode-dev-toolbar></vscode-dev-toolbar> : null}
      <HashRouter>
         <Routes>
          <Route path="/*" element={<App />} />
        </Routes>
      </HashRouter>
    </StrictMode>
)